<template>
  <div class="filter-tool">
    <div v-for="item in data" v-bind:key="item.key">
      <component
        v-if="
          item.componentName !== 'el-select' &&
            item.componentName !== 'el-date-picker'
        "
        :is="item.componentName"
        :placeholder="item.placeholder"
        v-model="filterQuery[item.name]"
        @keyup.enter.native="handleFilter"
        :clearable="item.clearable"
      >
      </component>
      <el-select
        v-if="item.componentName === 'el-select'"
        :is="item.componentName"
        :placeholder="item.placeholder"
        v-model="filterQuery[item.name]"
        :clearable="item.clearable"
      >
        <el-option
          v-for="item in item.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-date-picker
        v-if="item.componentName === 'el-date-picker'"
        :start-placeholder="item.placeholder[0]"
        :end-placeholder="item.placeholder[1]"
        v-model="filterQuery[item.name]"
        :default-value="item.defaultValue"
        @change="changeDatePicker"
        :type="item.type || date"
        :clearable="item.clearable"
      >
      </el-date-picker>
    </div>
    <div>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查询</el-button
      >

      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-refresh-right"
        @click="handleClearQuery"
        >重置</el-button
      >
    </div>
  </div>
</template>
<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'

import { parseTimeJS as parseTime } from '@/utils'

interface OptionItem {
  value: string
  label: string
}
interface DateItem {
  componentName: string
  placeholder: string
  name: string | string[]
  key: string
  defaultValue?: string | string[]
  type?: string
  clearable?: boolean
  options?: OptionItem[]
}

@Component({
  name: 'filterTool',
  components: {}
})
export default class extends Vue {
  @Prop({ default: [] }) private data!: DateItem[] | []
  private filterQuery: any = {
    // 筛选对象
  }
  //   private data: DateItem[] = [
  //     {
  //       componentName: 'el-select',
  //       placeholder: '请选择',
  //       name: 'name',
  //       key: 'name',
  //       defaultValue: 'a',
  //       options: [
  //         {
  //           value: '1',
  //           label: 'a'
  //         },
  //         {
  //           value: '2',
  //           label: 'b'
  //         }
  //       ]
  //     },
  //     {
  //       componentName: 'el-input',
  //       placeholder: '请输入',
  //       name: 'age',
  //       key: 'age'
  //     },
  //     {
  //       componentName: 'el-date-picker',
  //       placeholder: ['实际放款时间开始', '实际放款时间结束'],
  //       name: ['startTime', 'endTime'],
  //       key: 'time',
  //       type: 'datetimerange',
  //       clearable: true
  //     }
  //   ]
  private changeDatePicker(value: string) {
    console.log(value)
  }
  mounted() {
    this.getFilterQuery()
  }
  private getFilterQuery() {
    const keys: any = []
    const filter: any = {}
    this.data.forEach((item: any) => {
      // 判断各种异常情况
      if (!item.key) {
        console.error('data的各项中，必须指定key')
        return
      }
      if (keys.includes(item.key)) {
        console.error(`key值有重复`)
        return
      }

      keys.push(item.key) // 插入数组，可判断是否有重复

      if (!item.name) {
        console.error(`name不能为空`)
        return
      }

      //如果是数组
      if (item.name && item.name instanceof Array) {
        if (
          item.defaultValue &&
          item.defaultValue.length !== item.name.length
        ) {
          console.error('默认值指定的数组长度与name指定的数组长度不一致')
          return
        }
        filter[item.name] = item.defaultValue || []
        console.log(filter)
      }
      if (item.name && typeof item.name === 'string') {
        filter[item.name] = item.defaultValue || ''
      }
    })
    this.filterQuery = Object.assign({}, filter)
    this.handleFilter()
  }
  private handleFilter() {
    const query: any = {}
    Object.keys(this.filterQuery).forEach((key: any) => {
      const keys: any = key.split(',')
      // 如果长度为2
      if (keys.length === 2) {
        if (
          this.filterQuery[key] instanceof Array &&
          this.filterQuery[key].length === 2
        ) {
          query[keys[0]] = parseTime(this.filterQuery[key][0])
          query[keys[1]] = parseTime(this.filterQuery[key][1])
        } else {
          query[keys[0]] = parseTime('')
          query[keys[1]] = parseTime('')
        }
      } else {
        query[key] = this.filterQuery[key]
      }
    })
    this.$emit('handleFilter', query)
  }
  private handleClearQuery() {
    this.filterQuery = {}
  }
}
</script>
<style lang="scss"></style>
